import React, { Component, createRef } from 'react'
import { findDOMNode } from 'react-dom'
// findDOMNode(当前组件实例)  把组件实例转换为真实的dom结构
import Com from './Com'

export default class Ref extends Component {
    def = createRef()
    render() {
        return (
            <div>
                <h4>Dom操作</h4>
                <Com ref="com"/>

                {/* 字符串方式获取==>严格模式下会出现警告 */}
                {/* <input ref="ipt" type="text" /> */}

                {/* 通过函数的方式 */}
                {/* <input ref={(el) => {
                    // console.log(el)
                    // el.focus()
                    this.abc = el
                }} type="text" /> */}

                {/* <input ref={ this.def } type="text" /> */}
            </div>
        )
    }
    // 组件  完成  挂载
    componentDidMount() {
        // 给组件添加
        // console.log(this.refs.com)
        console.log(findDOMNode(this.refs.com))


        // this.refs.ipt.focus()

        // console.log(this.abc)

        // 
        // this.def.current.value = "123"
    }
}
